<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>

<div id="app">

    <el-steps :active="3" align-center style="margin-top: 20px;">
        <el-step title="步骤一" description="选择要预约的科室"></el-step>
        <el-step title="步骤2" description="请选择可预约的医生"></el-step>
        <el-step title="步骤3" description="请填写预约信息"></el-step>
    </el-steps>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="预约医师" prop="name" style="margin-left: 550px; margin-top: 20px;">
            <el-input v-model="ruleForm.name"  style="width: 200px;">
            </el-input>
        </el-form-item>

        <el-form-item label="预约科室" prop="kname" style="margin-left: 550px;">
            <el-input v-model="ruleForm.kes.kname"  style="width: 200px;">
            </el-input>
        </el-form-item>

        <el-form-item label="病人姓名" prop="bname" style="margin-left: 550px; ">
            <el-input v-model="ruleForm.bname" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="病人年龄" prop="age" style="margin-left: 550px;">
            <el-input v-model="ruleForm.age" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex" style="margin-left: 550px;">
            <template>
                <el-radio v-model="ruleForm.sex" label="男">男</el-radio>
                <el-radio v-model="ruleForm.sex" label="女">女</el-radio>
            </template>
        </el-form-item>

        <el-form-item label="预约时间" prop="riqi" style="margin-left: 550px; ">
            <el-input v-model="tableForm.riqi" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="病情简述" prop="text" style="margin-left: 550px;">
            <el-input
                    type="textarea"
                    placeholder="请描述病情"
                    v-model="ruleForm.text"
                    maxlength="30"
                    show-word-limit
                    style="width: 200px;"
            >
            </el-input>
        </el-form-item>

        <el-form-item label="挂号费用" prop="priceC" style="margin-left: 550px; width: 300px;">
            <el-select v-model="ruleForm.shift.priceC" placeholder="请缴纳费用">
            </el-select>
        </el-form-item>

        <el-form-item style="margin-left: 550px;">
            <el-button type="primary" @click="boneTwo('ruleForm')">立即预约</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>


</div>

<script>



    var haha = new Vue({
        el:"#app",
        data:{
            tableForm:{
                riqi:''
            },
            ruleForm:{
                bname:'',
                age:'',
                sex:'',
                text:'',
                name:'',
                kname:'',
                riqi:'',
                id:''
            },
            registerForm:{
                bname:'',
                age:'',
                sex:'',
                text:'',
                dname:'',
                kname:'',
                riqi:'',
                id:''
            },
            showDate:[],
            tableData:[],
            rules:{
                bname: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                text: [
                    { required: true, message: '请输入病情', trigger: 'blur' },
                    { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
                ],

            }
        },
        methods:{
            boneTwo(formName) {
                haha.$refs[formName].validate((valid) => {
                    haha.registerForm.id = haha.ruleForm.id;
                    haha.registerForm.riqi = haha.tableForm.riqi;
                    haha.registerForm.bname = haha.ruleForm.bname;
                    haha.registerForm.age = haha.ruleForm.age;
                    haha.registerForm.sex = haha.ruleForm.sex;
                    haha.registerForm.text = haha.ruleForm.text;
                    haha.registerForm.kname = haha.ruleForm.kes.kname;
                    haha.registerForm.dname = haha.ruleForm.name;
                    $.post("/ssm/register/addBoneTwo",haha.registerForm,function (backData) {
                        var a = haha.ruleForm.shift.priceC;
                        window.location.href = "/ssm/alibaba.html?a="+a;
                    })
                });
            }

        }
    });

    var url = location.search;
    //字符串截取拿到医生的id
    var str = url.match(/id=(\S*)date/)[1];
    //截取字符串拿到预约的时间
    var date = url.split("date=")[1];
    haha.tableForm.riqi = date;
    $.get("/ssm/register/getBoneTwo?id="+str,function (backData) {
        haha.ruleForm = backData.data[0];
    });
</script>
</body>
</html>